import {FormInstance} from 'ant-design-vue'
import {PropType} from 'vue'
import {IconImg} from '../image'
import {ChangeVisible} from '../modal'
import {CnBoldSpan, CnMediumSpan, CnNormalSpan} from '../text'

const SDMFTable = defineComponent({
  setup(props, {slots}) {
    return () => <table class='table-auto mb-20'>{slots.default?.()}</table>
  }
})

const SDMFTbody = defineComponent({
  setup(props, {slots}) {
    return () => <tbody>{slots.default?.()}</tbody>
  }
})

const SDMFTr = defineComponent({
  setup(props, {slots}) {
    return () => <tr class='h-56 flex items-center'>{slots.default?.()}</tr>
  }
})

const SDMFTdByLabel = defineComponent({
  setup(props, {slots}) {
    return () => <td class='pl-26'>{slots.default?.()}</td>
  }
})
const SDMFTdByValue = defineComponent({
  setup(props, {slots}) {
    return () => <td class=''>{slots.default?.()}</td>
  }
})
const SDMFTdByUnit = defineComponent({
  setup(props, {slots}) {
    return () => <td class=''>{slots.default?.()}</td>
  }
})

const TemplateModalForm = defineComponent({
  props: {
    changeVisible: Function as PropType<ChangeVisible>
  },
  emits: {
    finish: (formRef?: FormInstance) => true,
    reset: (formRef?: FormInstance) => true
  },
  setup(props, {emit, slots}) {
    const state = reactive<{
      shareUserPhone: number | null
    }>({
      shareUserPhone: null
    })

    function handleConfirmClick() {
      props.changeVisible && props.changeVisible(false)
    }

    function handleCancelClick() {
      props.changeVisible && props.changeVisible(false)
    }

    return () => (
      <div class='relative'>
        <SDMFTable>
          <SDMFTbody>
            <SDMFTr>
              <div class='flex justify-center items-center'>
                <IconImg imgName='header' class='w-80 h-80'></IconImg>
              </div>
            </SDMFTr>

            <SDMFTr>
              <SDMFTdByLabel>
                <CnBoldSpan class='min-w-20 mr-24'>昵称：</CnBoldSpan>
              </SDMFTdByLabel>
              <SDMFTdByValue>
                <a-input placeholder='输入昵称'></a-input>
              </SDMFTdByValue>
              <SDMFTdByUnit></SDMFTdByUnit>
            </SDMFTr>
          </SDMFTbody>
        </SDMFTable>

        <div class='ant-modal-footer'>
          <a-button class='ant-btn' onClick={handleCancelClick}>
            取消
          </a-button>

          <a-button class='ant-btn' type='primary' onClick={handleConfirmClick}>
            确定
          </a-button>
        </div>
      </div>
    )
  }
})

export default TemplateModalForm
